<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.jpg" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/swiper-bundle.min.css">
    <link rel="stylesheet" href="./css/swiper.min.css">
    <link rel="stylesheet" href="./css/index.css">
    <title>得物App-新一代潮流网购社区</title>
    <style title="轮播图">
        .swiper {
            width: 72vw;
            height: 31vw;
            --swiper-navigation-color: #fff;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 20px;/* 设置按钮大小 */
        }

        .swiper-slide {
            text-align: center;
            font-size: 18px;
            /* background: black; */
            color: #fff;
            /* Center slide text vertically */
            display: -webkit-box;
            display: -ms-flexbox;
            display: -webkit-flex;
            display: flex;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
            -webkit-box-align: center;
            -ms-flex-align: center;
            -webkit-align-items: center;
            align-items: center;
            transition: 300ms;
            transform: scale(0.8);
            user-select: none;
        }

        .swiper-slide img {
            width: 100% !important;
            /* height: 31vw; */
            height: auto;
        }
        .swiper_btn_next,
        .swiper_btn_prev {
            width: 40px ;
            height: 40px;
            border-radius: 50%;
            background-color: rgba(0, 0, 0, .5);
        }
        .swiper-slide-active,
        .swiper-slide-duplicate-active {
            transform: scale(1);
        }
    </style>
</head>

<body>
    <!-- 头部开始 -->
    <div id="header">
        <a href="./index.html">
            <img src="./img/index/logo.png" alt="">
        </a>
        <div class="right">
            <a class="active" href="./index.html">首页</a>
            <a href="./community.html">社区精选</a>
            <a href="./shop.html">得物商城</a>
            <a href="javascript:;">机构服务</a>
            <a href="./about.html">关于我们</a>
        </div>
    </div>
    <!-- 头部结束 -->

    <!-- 头部下方背景开始 -->
    <div id="main">
        <div class="main-bg-black"></div>
        <div class="main-bg">
        </div>
        <div class="top-intro">
            <div class="left-bg">
                <video src="https://cdn.poizon.com/node-common/74600cbadf27e978dff51b8a648b09a4.mp4" autoplay muted></video>
            </div>
            <div class="right">
                <p class="right-p1">新一代潮流网购社区</p>
                <p class="right-p2">鉴别服务开创者 力保全新正品</p>
                <p class="right-p3">正品保障 · 逐件查验 · 多重鉴别</p>
                <div class="download">
                    <div class="ios-android">
                        <img class="ios" src="./img/index/ios_download.webp" alt="">
                        <img class="android" src="./img/index/android_download.webp" alt="">
                    </div>
                    <div>
                        <img class="qrcode" src="./img/index/qrcode.webp" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 头部下方背景结束 -->

    <!-- 内容区域开始 -->
    <div id="container">
        <div class="differentiate">
            <div class="title">
                <div class="title-bg">
                    <p>多重鉴别 正品保障</p>
                </div>
                <p class="border"></p>
                <span>- 每件商品都经过独立查验和多重鉴别，确保你购买到全新无瑕疵正品 -</span>
            </div>
            <p class="number">线上鉴别量已超过 60,000,000</p>
            <div class="iconBoxShop">
                <div>
                    <img src="./img/index/icon_sneakers.webp" alt="">
                    <p>球鞋</p>
                </div>
                <div>
                    <img src="./img/index/icon_clothing.webp" alt="">
                    <p>服饰</p>
                </div>
                <div>
                    <img src="./img/index/icon_watch.webp" alt="">
                    <p>手表</p>
                </div>
                <div>
                    <img src="./img/index/icon_hat.webp" alt="">
                    <p>配饰</p>
                </div>
                <div>
                    <img src="./img/index/icon_bag.webp" alt="">
                    <p>奢侈品</p>
                </div>
            </div>
            <div class="videoImg">
                <video src="https://cdn.poizon.com/node-common/5dc34a3f3059b2fa21669f9813260ff4.mp4"
                    poster="https://cdn.poizon.com/node-common/7324c3f449efc8a443375d5f78a83e2a.jpeg" controls></video>
            </div>
            <div class="btn" onclick="document.getElementById('mydialog').showModal()">
                立即发布鉴别
            </div>
        </div>
        <div class="liveStyle">
            <div class="title">
                <div class="title-bg">
                    <p>潮流生活方式社区</p>
                </div>
                <p class="border"></p>
                <span>- 王思聪和IG队员力荐，众位明星潮人入驻 -</span>
            </div>
            <!-- Swiper -->
            <div class="swiper mySwiper">
                <div class="swiper-wrapper"
                    style="transition-duration: 0ms; transform: translate3d(-1044px, 0px, 0px);">
                    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 492px;">
                        <img src="./img/index/banner_list3.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="3" style="width: 492px;">
                        <img src="./img/index/banner_list4.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-duplicate swiper-slide-prev" data-swiper-slide-index="4"
                        style="width: 492px; ">
                        <img src="./img/index/banner_list5.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" style="width: 492px;">
                        <img src="./img/index/banner_list1.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-next" data-swiper-slide-index="1" style="width: 492px;">
                        <img src="./img/index/banner_list2.webp" alt="">
                    </div>
                    <div class="swiper-slide" data-swiper-slide-index="2" style="width: 492px;">
                        <img src="./img/index/banner_list3.webp" alt="">
                    </div>
                    <div class="swiper-slide" data-swiper-slide-index="3" style="width: 492px;">
                        <img src="./img/index/banner_list4.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-duplicate-prev" data-swiper-slide-index="4"
                        style="width: 492px; ">
                        <img src="./img/index/banner_list5.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-active"
                        data-swiper-slide-index="0" style="width: 492px; ">
                        <img src="./img/index/banner_list1.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-duplicate swiper-slide-duplicate-next"
                        data-swiper-slide-index="1" style="width: 492px;">
                        <img src="./img/index/banner_list2.webp" alt="">
                    </div>
                    <div class="swiper-slide swiper-slide-duplicate" data-swiper-slide-index="2" style="width: 492px; ">
                        <img src="./img/index/banner_list3.webp" alt="">
                    </div>
                </div>
                <div class="swiper-button-next swiper_btn_next"></div>
                <div class="swiper-button-prev swiper_btn_prev"></div>
            </div>
        </div>
    </div>
    <!-- 内容区域结束 -->

    <!-- 底部开始 -->
    <div id="footer">
        <p>上海识装信息科技有限公司</p>
        <p>Shanghai Shizhuang Information Technology Co., Ltd</p>
        <p>
            增值电信业务经营许可证 沪B2-20180281 |
            <a href="#" target="_blank" rel="noopener noreferrer">沪ICP备16019780号-9号 |</a>
            网络文化经营许可证 沪网文（2021）4421-366号 |
            <a href="#" target="_blank" rel="noopener noreferrer">沪公网安备31010902003239号</a>
            <img width="12" src="./img/footer/footer_small_img.png" alt="" class="jsx-42442502">
        </p>
        <p>
            医疗器械网络交易服务第三方平台备案:（沪）网械平台备字［2021］第00003号 | 互联网药品信息服务资格证书（沪）-经营性-2020-0212 | 网信算备310109033582302220017号
        </p>
        <p class="government-list">
            <a href="#" target="_blank" class="filings">廉政举报</a>
            <a href="#" target="_blank" class="filings">隐私政策</a>
            <a href="#" target="_blank" class="filings">使用条款</a>
            <a href="#" target="_blank" class="filings">知识产权</a>
            <a href="#" target="_blank" class="filings">加入我们</a>
            <a href="#" target="_blank" class="filings">自律声明</a>
        </p>
        <div class="iconBox">
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img1.webp" alt="" style="height: 32px; width: auto;">
            </a>
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img2.webp" alt="" style="height: 26px; width: auto;">
            </a>
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img3.webp" alt="" style="height: 26px; width: auto;">
            </a>
            <a href="#" target="_blank" class="aIcon">
                <img src="./img/footer/footer_img4.webp" alt="" style="height: 34px; width: auto;">
            </a>
        </div>
        <p>社区内容举报电话：400-891-9888（工作时间：8:00-22:00）021-63066366（工作时间：8:00-19:00）</p>
        <p>2016-2023 识装版权所有</p>
    </div>
    <!-- 底部结束 -->
    <!-- [弹出层 -->
    <dialog id="mydialog">
        <div id="mydialog-container">
            <img src="./img/index/dialog.png"  alt="">
            <div>
                <img src="./img/index/qrcode.webp" alt="">
            </div>
            <p>扫码下载得物App</p>
            <p>立即发布鉴别</p>
            <span onclick="document.getElementById('mydialog').close()">确定</span>
        </div>
    </dialog>
    <!-- 弹出层] -->
    <script src="./js/swiper-bundle.min.js"></script>
    <script src="./js/jquery-3.7.1.js"></script>
    <script title="轮播图">
        var swiper = new Swiper('.mySwiper', {
            navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev",
            },
            slidesPerView: 3,
            centeredSlides: true,
            loop: true,
            autoplay:true,
        });
        $('.mySwiper').on('mouseover', function(){
            $('.swiper_btn_next').show();
            $('.swiper_btn_prev').show();
        }).on('mouseout', function(){
            $('.swiper_btn_next').hide();
            $('.swiper_btn_prev').hide();
        })
    </script>
</body>

</html>